<template>
    <div class="app-container" >
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input v-model="searchParam.SEARCH_LIKE_exam_name" class="filter-item" clearable
                      placeholder="请输入考试名称"
                      style="width: 200px;" @keyup.enter.native="handleFilter"/>
            <el-input v-model="searchParam.SEARCH_LIKE_real_name" class="filter-item" clearable
                      placeholder="请输入考生姓名"
                      style="width: 200px;" @keyup.enter.native="handleFilter"/>
            <el-select v-model="searchParam.SEARCH_EQ_status" class="filter-item" clearable
                       placeholder="请选择考试状态"
                       style="width: 200px;" @keyup.enter.native="handleFilter">
                <el-option :value="0" label="未开考"></el-option>
                <el-option :value="1" label="待考试"></el-option>
                <el-option :value="2" label="待批改"></el-option>
                <el-option :value="3" label="已完成"></el-option>
            </el-select>
            <el-select v-model="searchParam.SEARCH_EQ_sign_status" class="filter-item" clearable
                       placeholder="请选择报名状态"
                       style="width: 200px;" @keyup.enter.native="handleFilter">
                <el-option :value="0" label="未报名"></el-option>
                <el-option :value="1" label="已报名"></el-option>
                <el-option :value="2" label="已取消"></el-option>
            </el-select>
            <el-date-picker
                v-model="dateRange"
                :default-time="['00:00:00', '23:59:59']"
                align="right"
                class="filter-item"
                end-placeholder="结束日期"
                range-separator="/"
                start-placeholder="开始日期"
                type="datetimerange"
                unlink-panels
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleSelect"
            >
            </el-date-picker>
            <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleFilter"> 搜索</el-button>
            <!--      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus"-->
            <!--                 @click="handleCreate"> 新增-->
            <!--      </el-button>-->
        </div>

        <!-- 表格-内容区域 -->
        <el-table :key="tableKey" v-loading="listLoading" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :align="column.align?column.align:'center'"
                             :fixed="column.fixed"
                             :formatter="column.formatter"
                             :label="column.label"
                             :min-width="column.minWidth"
                             :prop="column.prop"
                             :sortable="column.sortable"
                             :type="column.type" :width="column.width">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true && scope.row[column.prop]"
                         :src=" scope.row[column.prop].indexOf('http') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         class="img" height="60" width="60"/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled/>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" class-name="small-padding" fixed="right" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status = 3" class="el-button--primary" icon="el-icon-edit" type="text"
                               @click="handleResult(scope.row)"> 考试结果
                    </el-button>
                    <el-button class="el-button--primary" icon="el-icon-edit" type="text"
                               @click="handleUpdate(scope.row)"> 答题详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :limit.sync="pageRequest.pageSize" :page.sync="pageRequest.pageNum"
                    :total="tableTotal" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :close-on-click-modal="false" :title="'答题详情'" :visible.sync="dialogFormVisible" top="5vh"
                   width="75%">
            <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-width="140px" style="width: 100%">
                <exam-member-answer v-if="dialogFormVisible" :id="dataForm.id"
                                    @updateDisabled="updateDisabled"></exam-member-answer>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="disabled" size="mini" type="success" @click.native="examFinish()">完成阅卷</el-button>
                <el-button size="mini" @click.native="closeDialog()">取消</el-button>
            </div>
        </el-dialog>

        <!--新增编辑界面-->
        <el-dialog :close-on-click-modal="false" :title="'考试结果'" :visible.sync="dialogFormVisible2" top="5vh"
                   width="75%">
            <el-form ref="dataForm2" :model="dataForm" :rules="dataFormRules" label-width="140px" style="width: 100%">
               <exam-result v-if="dialogFormVisible2" :examId="paperId" ></exam-result>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog2()">取消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import ExamMemberAnswer from "@/views/exam/examMemberAnswer.vue";
import ExamResult from "@/views/exam/examResult.vue";

export default {
    name: 'examSign',
    components: {
        Pagination,
        ExamMemberAnswer,
        ExamResult,
    },
    directives: {},
    filters: {},
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: {
                pageNum: 1,
                pageSize: 10,
            },
            searchParam: {},
            orderParam: {
                sign_status: true,
                status: true,
                start_time: false,
                create_time: false,
            },
            dialogFormVisible: false,//默认不显示弹出框
            dialogFormVisible2: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            showDialoging: false,//保存表单时loading框

            disabled: true,//保存表单时loading框
            columns: [
                {prop: 'realName', label: '认证名', sortable: false, width: "120", fixed: true},
                {prop: 'username', label: '用户名', sortable: false, width: "120"},
                {prop: 'headPic', label: '头像', sortable: false, imgFlag: true, width: "120"},
                {
                    prop: 'signStatus', label: '报名状态', sortable: false, width: "240", tagFlag: true,
                    tagFormatter: [
                        {text: '报名中', value: 0, type: 'info'},
                        {text: '已报名', value: 1, type: 'success'},
                        {text: '已取消', value: 2, type: 'warn'},
                    ]
                },
                {
                    prop: 'status', label: '考试状态', sortable: false,  width: "240",
                    tagFlag: true,
                    tagFormatter: [
                        {text: '未开考', value: 0, type: 'success'},
                        {text: '待考试', value: 1, type: 'warn'},
                        {text: '待批改', value: 2, type: 'warn'},
                        {text: '已完成', value: 3, type: 'success'}
                    ]
                },
                {prop: 'startTime', label: '开始时间', sortable: false, width: '240'},
                {prop: 'examName', label: '考试名称', sortable: false, width: "240"},
                {prop: 'examImg', label: '考试图片', sortable: false, imgFlag: true, width: "240"},
                {prop: 'examCount', label: '允许作答次数', sortable: false, width: "240"},
                {prop: 'questionCount', label: '题目数量', sortable: false, width: "240"},
                {prop: 'examDuration', label: '考试时长（分钟）', sortable: false, width: "240"},
                {prop: 'totalScore', label: '试卷总分', sortable: false, width: "240"},
                {prop: 'memberScore', label: '作答分数', sortable: false, width: "240"},
                {prop: 'passScore', label: '通过分数', sortable: false, width: "240"},
                {prop: 'leftCount', label: '剩余预约次数', sortable: false, width: "240"},
                {prop: 'createTime', label: '创建时间', sortable: false, width: "240"},
                {prop: 'endTime', label: '交卷时间', sortable: false, width: "240"},
            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            //表单检验规则
            dataFormRules: {},
            uid: '',
            paperId:'',
            dateRange: '',
        }
    },
    created() {
        this.getList();
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            this.pageRequest.searchParam = this.searchParam
            this.pageRequest.orderParam = this.orderParam
            this.$api.getVExamMemberList(this.pageRequest).then(response => {
                console.log(response , 'res')
                this.tableList = response.data.content
                this.tableTotal = response.data.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({message: '列表获取失败', type: 'error'})
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest = {
                pageNum: 1,
                pageSize: 10,
            }
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出新增表单
        handleCreate() {
            this.operation = true;
            this.initDataForm();
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //【按钮点击】--- 弹出编辑表单
        handleUpdate(row) {
            this.operation = false;
            this.dataForm = Object.assign({}, row)
            //显示编辑菜单
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //保存表单数据
        saveFormData() {
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.editLoading = true;
                //【API请求】----保存数据
                this.$api.saveSExamPaperMember(this.dataForm).then(() => {
                    this.editLoading = false;//关闭loading框
                    this.dialogFormVisible = false;//关闭表单页面
                    this.initDataForm();//重置表单数据
                    this.getList();//重新获取表格数据
                    this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
                })
            })
        },
        //【按钮点击】---删除行
        handleDelete(row) {
            this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                //【API请求】---- 删除数据
                this.$api.deleteSExamPaperMember({ids: row.id}).then(() => {
                    this.$message({message: '操作成功', type: 'success'})
                    this.pageRequest.pageNum = 1
                    this.getList();
                })
            }).catch(() => {
                this.$message({message: '操作失败', type: 'error'})
            });
        },
        //【按钮点击】
        examFinish() {
            //【API请求】---- 完成阅卷
            this.$api.examFinishApi({id: this.dataForm.id}).then(() => {
                this.$message({message: '操作成功', type: 'success'})
                this.closeDialog();
            })
        },
        //初始化表单数据，重新渲染
        initDataForm() {
            this.dataForm = {
                frameTextContentId: '',
                memberId: '',
                status:0,
                id: '',
                examId: '',
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },

        closeDialog2() {
            this.$refs['dataForm2'].resetFields();
            this.dialogFormVisible2 = false
        },

        handleInfo(row) {
            this.uid = row.examId
            this.showDialoging = true
        },

        closeShowDialoging() {
            this.showDialoging = false
        },

        updateDisabled(data) {
            console.log(data, "data")
            if (data === 0) {
                this.disabled = true
            } else {
                this.disabled = false
            }
        },
        handleSelect(value) {
            if (value) {
                this.searchParam.SEARCH_GE_create_time = value[0]
                this.searchParam.SEARCH_LE_create_time = value[1]
            } else {
                this.searchParam.SEARCH_GE_create_time = ''
                this.searchParam.SEARCH_LE_create_time = ''
            }
            // console.log(value ,'value')
            this.getList();
        },

        handleResult(row) {
            this.paperId= row.id
            this.dialogFormVisible2 = true
        }

    }


}
</script>
